<template>
    <a-form ref="formRef" :model="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="字典项文本" :rules="rules.label" name="label">
            <a-input v-model:value="form.label" placeholder="请输入字典项文本" />
        </a-form-item>
        <a-form-item label="字典项值" :rules="rules.value" name="value">
            <a-input v-model:value.number="form.value" placeholder="请输入字典项值" />
        </a-form-item>
        <a-form-item label="字典项描述" name="des">
            <a-textarea v-model:value="form.des" placeholder="请输入字典描述" />
        </a-form-item>
        <a-form-item label="排序号" name="sort">
            <a-input-number v-model:value.number="form.sort" :min="1" placeholder="请输入排序号">
                <template #addonAfter>
                    <a-tooltip placement="bottomRight">
                        <template #title>排序号越小越靠前</template>
                        <question-circle-outlined />
                    </a-tooltip>
                </template>
            </a-input-number>
        </a-form-item>
        <a-form-item label="状态" name="status">
            <Switch v-model:checked="form.status" />
        </a-form-item>
    </a-form>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { QuestionCircleOutlined } from '@ant-design/icons-vue'
import { useForm } from '@iframe/tools/mixins/FormMixins'
import { Switch } from '@iframe/tools/components'

const { validate, getForm, setForm } = useForm()
const formRef = ref()
const form = reactive({
    status: 0
})
const rules = reactive({
    label: { required: true, message: '请输入字典项文本' },
    value: { required: true, message: '请输入字典值' }
})

defineExpose({ validate: validate(formRef), getForm: getForm(form), setForm: setForm(form) })
</script>
